<template>
  <!-- 电台分类 -->
  <div class="category">
    <scroll class="category-scroll"
            ref="scroll"
            :pull-up-load='true'
            @pullingUp='pullingUp'>
      <p class="cate-title">优秀新电台</p>
      <div class="content">
        <div v-for="(item,index) of catelist"
             :key="index"
             class="cate-item"
             @click="enterDetail(item.id)">
          <div class="top">
            <img :src="item.picUrl"
                 alt="">
          </div>
          <div class="bottom">
            <p class="name">{{item.name}}</p>
            <p class="desc">{{item.rcmdtext}}</p>
          </div>
        </div>
      </div>
      <p class="cate-hot-title">电台排行榜</p>
      <div class="content-hot">
        <radio-item :radioitem='catehotlist'
                    @imgLoad='imgLoad' />
      </div>
    </scroll>
  </div>
</template>

<script>
import Scroll from 'components/common/scroll/Scroll.vue'
import RadioItem from './RadioItem.vue'
import { debounce } from 'assets/common/tool'
import { _getTypeHotInfo } from 'network/radio'
// 图片加载完毕就刷新
import { ImgMixin } from 'mixin/ImgMixin'
export default {
  components: { RadioItem, Scroll },
  name: 'Categorey',
  data () {
    return {
      limit: 10,
      offset: 1,
      catehotlists: this.catehotlist
    }
  },
  mixins: [ImgMixin],
  props: {
    catelist: {
      type: Array,
      default () {
        return []
      }
    },
    catehotlist: {
      type: Array,
      default () {
        return []
      }
    },
    categorey: {
      type: Array,
      default () {
        return []
      }
    },
    index: {
      type: Number,
      default () {
        return 0;
      }
    }
  },
  methods: {
    getCateInfo (index) {
      // 分类电台的热门
      _getTypeHotInfo(this.categorey[index].id, this.limit * this.offset).then(res => {
        this.offset++;
        this.catehotlists = res.data.djRadios;
        this.$refs.scroll.finishPullUp()
        console.log(this.catehotlist);
      })
    },
    pullingUp () {
      debounce(this.getCateInfo(this.index), 1000)
    },
    // 电台详情
    enterDetail (id) {
      this.$router.push('/program/' + id);
    }
  }
}
</script>

<style scoped>
.category {
  width: 100%;
  height: 100%;
}
.category-scroll {
  height: calc(100% - 150px);
  /* overflow: hidden; */
}
.category .cate-title,
.category .cate-hot-title {
  width: 100%;
  height: 40px;
  font-size: 25px;
  border-bottom: 2px solid #00aa85;
}
.content {
  width: 100%;
  height: 250px;
  display: flex;
  margin: 10px 5px 5px 5px;
  font-size: 13px;
}
.cate-item {
  flex: 1;
}
.top {
  height: 190px;
}
.top img {
  width: 170px;
  height: 170px;
}
</style>
